<template>
    <div class="write-option">
        <div class="thumb">
            <span class="option-name">
                <slot name="name-left"></slot> {{name}}：
            </span>
        </div>
        <div class="content-box" @click="clickOpt">
            <div class="content only-text" :class="content ? 'active' : ''">
                {{text || defaultText}}
            </div>
            <div class="thumb">
                <van-icon class="icon" name="arrow" />
            </div>
        </div>
        <edit-window 
        ref="editWindow" 
        :placeholder="defaultText"
        :isShowUpLoadImg="upImg"
        :imgMaxLangth="imgMaxLangth"
        :textMaxLength="maxlength"
        :textMinLength="minlength"
        :id="`${this.id}WriteOpt`"
        @exceedUpImg="exceedUpImg"
        @textLess="textLess"
        @textMore="textMore"
        @sureSave="sureSave"
        >
            <template v-slot:top>
                <slot name="window-top"></slot>
            </template>
        </edit-window >
    </div>
</template>

<script>
// 自定义组件
import EditWindow from "_components/project/ShowWindow/EditWindow"

// 自定义方法
import { failTextVantToa } from "_projectFn/prompt"

export default {
    name: 'WriteOpt',
    props: {
        name: {
            type: String,
            default: '',
        },
        defaultText: {
            type: String,
            default: '',
        },
        text: {
            type: String,
            default: '',
        },
        content: {
            type: String,
            default: '',
        },
        minlength: {
            type: Number,
            default: 0,
        },
        maxlength: {
            type: Number,
            default: 0,
        },
        upImg: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: '',
        },
        imgMaxLangth: {
            type: Number,
            default: 2,
        }
    },
    data() {
        return {

        }
    },
    methods: {
        clickOpt() {
            // console.log('this.content', this.content)
            this.$refs.editWindow.coverEditContent(this.content) // 填充内容
            this.$refs.editWindow.showWindow() // 显示编辑弹窗
        },
        // 编辑弹窗，点击确定
        sureSave(str) {
            this.$emit('sureSave', {str, id: this.id})
        },
        // 文字数量小于规定数量
        textLess() {
            failTextVantToa(`${this.name}最少${this.minlength}个字`)
        },
        // 文字数量大于规定数量
        textMore() {
            failTextVantToa(`${this.name}最多${this.maxlength}个字`)
        },
        // 超过上传图片数量事件
        exceedUpImg() {
            failTextVantToa(`最多上传${this.imgMaxLangth}张图片`)
        },
    },
    components: {
        EditWindow,
    },
}
</script>

<style lang="scss" scoped>
.write-option {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #efefef;

    .thumb {
        flex-shrink: 0;
        font-weight: bold;
        display: flex;
        align-items: center;

        .option-name {
            flex-shrink: 0;

            .certainly-write-flag {
                color: red;
                display: inline-block;
                width: 10px;
            }
        }
    }

    .content-box {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;

        .content {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            overflow: hidden;
            width: 100%;
            color: #999999;
            height: 22px;
        }

        .active {
            color: #333333;
        }

        .thumb {
            flex-shrink: 0;

            .icon {
                font-weight: bold;
            }
        }
    }
}
</style>